<!--自定义组件引用--> 
<message ref="msg">新增课程成功！</message> 

<script> 
    Vue.component('message', { 
        // 组件显示状态 
        data() { 
            return { 
                show: false 
            } 
        },
        template: ` <div class="message-box" v-if="show"> 
                        <slot></slot> 
                        <!--toggle内部修改显示状态--> 
                        <span class="message-box-close" @click="toggle">X</span> 
                    </div> `,
        // 增加toggle方法维护toggle状态 
        methods: { 
            toggle() { 
                this.show = !this.show; 
            } 
        },
        // 修改message-close回调为toggle 
        mounted () { 
            this.$bus.$on('message-close', this.toggle); 
        }, 
    })
    const app = new Vue({
         methods: { 
            addCourse() { 
                // 使用$refs.msg访问自定义组件 
                this.$refs.msg.toggle() 
            } 
        } 
    })
</script>